<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="wc-pivotlist.min.css">

    <script src="exceljs.min.js"></script>
    <script src="FileSaver.min.js"></script>
    <script src="wc-pivotlist.min.js"></script>
</head>

<body>
    <div id="toolbar-container"></div>
    <wc-pivotlist id="pivotlist" style="margin: 100px;width: 1200px;height: 600px;display: block;"></wc-pivotlist>

    <script>

        //#region 生成模拟数据
        const name = ["张三", "李四", "王五", "赵六"];
        const grade = ["三年级", "四年级", "五年级", "六年级"];
        const className = ["一班", "二班", "三班"];
        const term = ["上学期", "下学期"];
        let data = [];
        for (let i = 0; i < 1000; i++) {
            let item = {
                id: i,
                "a06a0bab-2cfa-4ff0-9a13-43ec05615f3a": name[Math.floor(Math.random() * 4)],
                "fb96cb44-415c-4a51-95e0-74442bb190cb": grade[Math.floor(Math.random() * 4)],
                "cb27d0dc-5594-4ab3-ad24-867652b17c9e": className[Math.floor(Math.random() * 3)],
                "dad8a7f7-0133-4412-9b1c-d19c09cf4683": term[Math.floor(Math.random() * 2)],
                "fba08e18-1b2b-4ada-b92c-850c3a549aed": Math.floor(Math.random() * 100),
                "a876e4ab-8b8c-49eb-bc04-aee348294c07": Math.floor(Math.random() * 100)
            };
            data.push(item);
        }
        //#endregion

        const pivotList = document.getElementById('pivotlist');
        pivotList.option = {
            columns: [
                {
                    field: "fb96cb44-415c-4a51-95e0-74442bb190cb",
                    caption: "年级",
                    type: "row",
                    cellTemplate: function (e) {
                        return e.value
                    }
                },
                {
                    field: "cb27d0dc-5594-4ab3-ad24-867652b17c9e",
                    caption: "班级",
                    type: "row",
                    cellTemplate: function (e) {
                        return e.value
                    }
                },
                {
                    field: "a06a0bab-2cfa-4ff0-9a13-43ec05615f3a",
                    caption: "姓名",
                    type: "column",
                    cellTemplate: function (e) {
                        return e.value
                    }
                },
                {
                    field: "dad8a7f7-0133-4412-9b1c-d19c09cf4683",
                    caption: "学期",
                    type: "column",
                    cellTemplate: function (e) {
                        return e.value
                    },
                    filterTextTemplate: function (e) {
                        return "aa"
                    }
                },
                {
                    field: "fba08e18-1b2b-4ada-b92c-850c3a549aed",
                    caption: "语文",
                    type: "data",
                    // summaryType: "custom",
                    // summaryTemplate: function (e) {
                    //     return 555
                    // },
                    cellTemplate: function (e) {
                        if (e.value) {
                            return e.value;
                        } else {
                            return "/"
                        }
                    }
                },
                {
                    field: "a876e4ab-8b8c-49eb-bc04-aee348294c07",
                    caption: "数学",
                    type: "data",
                    summaryType: "avg",
                    cellTemplate: function (e) {
                        if (e.value) {
                            return e.value;
                        } else {
                            const testDiv = document.createElement("div");
                            testDiv.innerHTML = `<svg t="1752564170430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1109" width="16" height="16"><path d="M512 511m-388 0a388 388 0 1 0 776 0 388 388 0 1 0-776 0Z" fill="#FF314A" p-id="1110"></path><path d="M271.29 646.27l-90.34 221.3 236.81-32.41-146.47-188.89z" fill="#FF314A" p-id="1111"></path><path d="M503.389466 529.827389a101.36 152.03 3 1 0 15.913271-303.643296 101.36 152.03 3 1 0-15.913271 303.643296Z" fill="#FFFFFF" p-id="1112"></path><path d="M578.97 315.09c11.54 0.61 22.06 6.05 30.77 14.98 3.23 16.71 4.54 34.68 3.56 53.32-2.38 45.41-17.82 85.46-40.34 112.17-1.15 0.04-2.3 0.03-3.46-0.03-33.22-1.74-58.03-43.55-55.41-93.38 2.62-49.83 31.66-88.81 64.88-87.06z" p-id="1113"></path><path d="M731.704208 534.032046a86.14 129.21 3 1 0 13.524658-258.065844 86.14 129.21 3 1 0-13.524658 258.065844Z" fill="#FFFFFF" p-id="1114"></path><path d="M795.97 351.53c9.81 0.51 18.75 5.14 26.15 12.73 2.75 14.2 3.86 29.48 3.03 45.32-2.03 38.59-15.14 72.63-34.29 95.34-0.98 0.03-1.96 0.03-2.94-0.03-28.23-1.48-49.32-37.01-47.1-79.36 2.22-42.35 26.91-75.48 55.15-74zM186.54 879.5c-6.18 0-11.55-4.58-12.38-10.87-0.9-6.84 3.92-13.12 10.76-14.02l144.44-19c6.84-0.9 13.12 3.92 14.02 10.76s-3.92 13.12-10.76 14.02l-144.44 19c-0.55 0.07-1.1 0.11-1.65 0.11zM511.01 561.51c-3.77 0-7.49-1.7-9.95-4.93-50.16-65.87-119.75-30.2-122.69-28.65-6.09 3.22-13.65 0.91-16.89-5.18s-0.96-13.63 5.12-16.88c0.93-0.5 23.06-12.19 52.95-13.72 28.04-1.44 68.39 5.94 101.4 49.29 4.18 5.49 3.12 13.34-2.37 17.52a12.452 12.452 0 0 1-7.56 2.56zM643.39 674.98c-1.07 0-2.13-0.03-3.21-0.11-14.71-0.96-27.99-8.46-37.38-21.1-8.94-12.03-13.29-27.4-12.25-43.29 0.45-6.89 6.4-12.11 13.29-11.66 6.89 0.45 12.11 6.4 11.66 13.29-0.65 9.97 1.96 19.46 7.37 26.74 4.95 6.66 11.68 10.59 18.96 11.07 7.27 0.48 14.46-2.54 20.24-8.5 6.31-6.5 10.14-15.58 10.8-25.55 0.45-6.89 6.4-12.11 13.29-11.66 6.89 0.45 12.11 6.4 11.66 13.29-1.04 15.88-7.36 30.56-17.8 41.32-10.17 10.48-23.07 16.14-36.62 16.14z" p-id="1115"></path></svg>`
                            return testDiv;
                        }
                    }
                },
            ],
            data: data,
            showSumColumn: true,
            showSumRow: true,
            showDragColumn: true,
            showExport: true,
            showExpand: true,    //显示展开列
            expandAll: true,
            // toolBarContainer: document.getElementById("toolbar-container")
        }
    </script>
</body>

</html>